<template>  
    <div class="overdue-reminder">  
      <h2>催还提醒</h2>  
      <div v-if="booksToRemind.length === 0" class="no-books">  
        当前没有即将到期的图书
      </div>  
      <ul v-else>  
        <li v-for="(book, index) in booksToRemind" :key="book.id" class="book-item">  
          <div class="book-info">  
            <h3>{{ book.title }}</h3>  
            <p>借阅者: {{ book.borrower }}</p>  
            <p>应还日期: {{ formatDate(book.dueDate) }}</p>  
          </div>  
          <button @click="remind(book)">发送催还提醒</button>  
        </li>  
      </ul>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        books: [  
          { id: 1, title: 'Vue 3 实战', borrower: '张三', dueDate: new Date('2024-10-15') },  
          { id: 2, title: 'JavaScript 高级编程', borrower: '李四', dueDate: new Date('2024-10-18') },   
        ],   
        daysBeforeDue: 7  
      };  
    },  
    computed: {  
      booksToRemind() {  
        const today = new Date();  
        const reminderDate = new Date(today);  
        reminderDate.setDate(today.getDate() + this.daysBeforeDue);  
    
        return this.books.filter(book => {  
          const bookDueDate = new Date(book.dueDate);  
          return bookDueDate >= today && bookDueDate <= reminderDate;  
        });  
      }  
    },  
    methods: {  
      formatDate(date) {  
        return date.toLocaleDateString();  
      },  
      remind(book) {    
        alert(`已向 ${book.borrower} 发送催还提醒：${book.title} 应在 ${this.formatDate(book.dueDate)} 前归还。`);   
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  .overdue-reminder {  
    max-width: 800px;  
    margin: 0 auto;  
    padding: 20px;  
    border: 1px solid #ccc;  
    border-radius: 8px;  
  }  
    
  .no-books {  
    text-align: center;  
    padding: 20px;  
    color: #666;  
  }  
    
  .book-item {  
    border-bottom: 1px solid #eee;  
    padding: 15px 0;  
  }  
    
  .book-info {  
    margin-right: 100px;   
  }  
    
  .book-item h3 {  
    margin-top: 0;  
  }  
    
  button {  
    padding: 10px 20px;  
    cursor: pointer;  
    background-color: #f44336;  
    color: white;  
    border: none;  
    border-radius: 4px;  
    float: right; 
  }  
    
  button:hover {  
    background-color: #da190b;  
  }  
  </style>